<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑</title>
</head>
<style>
    *{font-size: 12px;}
    .rptInput{display: inline-block; margin-right: 3em;}
    .consoleStyle{background-color:#000; color:#50fa7b; border: 1px solid #000; margin:1px 1px; padding:2px 3px 12px 3px}
</style>
<!--编辑器主体引入-->
<link rel="stylesheet" th:href="@{/static/codemirror/lib/codemirror.css}">
<script th:src="@{/static/codemirror/lib/codemirror.js}"></script>
<!--编辑器支持的语言插件-->
<script th:src="@{/static/codemirror/mode/xml.js}"></script>
<script th:src="@{/static/codemirror/mode/sql.js}"></script>
<link rel="stylesheet" th:href="@{/static/codemirror/addon/hint/show-hint.css}" />
<script th:src="@{/static/codemirror/addon/edit/matchbrackets.js}"></script>
<script th:src="@{/static/codemirror/addon/hint/show-hint.js}"></script>
<script th:src="@{/static/codemirror/addon/hint/xml-hint.js}"></script>
<script th:src="@{/static/codemirror/addon/hint/sql-hint.js}"></script>
<!--编辑器主题-->
<link rel="stylesheet" th:href="@{/static/codemirror/theme/dracula.css}"/>
<link rel="stylesheet" th:href="@{/static/codemirror/theme/3024-day.css}"/>
<link rel="stylesheet" th:href="@{/static/codemirror/theme/3024-night.css}"/>
<link rel="stylesheet" th:href="@{/static/codemirror/theme/monokai.css}"/>
<!--编辑器支持代码折叠-->
<link rel="stylesheet" th:href="@{/static/codemirror/addon/fold/foldgutter.css}"/>
<script th:src="@{/static/codemirror/addon/fold/foldcode.js}"></script>
<script th:src="@{/static/codemirror/addon/fold/foldgutter.js}"></script>
<script th:src="@{/static/codemirror/addon/fold/brace-fold.js}"></script>
<script th:src="@{/static/codemirror/addon/fold/comment-fold.js}"></script>
<body>
<form th:method="POST" th:action="@{/admin/rptSave}">
    <div th:if="${not #strings.isEmpty(rpt.rptId)}">
        <input type="hidden" name="rptId" th:value="${rpt.rptId}"/>
    </div>
    <div th:object="${rpt}">
        <div style="margin:1em 1em">
            <span class="rptInput">
                <laber>报表编码</laber>
                <input th:type="text" name="rptCode" th:value="*{rptCode}"/>
            </span>
            <span class="rptInput">
                <laber>报表名称</laber>
                <input th:type="text" name="rptName" th:value="*{rptName}"/>
            </span>
            <span class="rptInput">
                <laber>数据源</laber>
                <input th:type="text" name="dsId" th:value="*{dsId}"/>
                </span>
            <span class="rptInput">
                <laber>有效状态</laber>
                <select name="state">
                    <option id="succ" value="1">有效</option>
                    <option id="fail" value="0">无效</option>
                </select>
            </span>
            <button th:type="submit">保存</button>
            <a href="javascript:void(0);" th:onclick="rptList([[*{rptCode}]]);">查询测试</a>
            <a href="javascript:void(0);" th:onclick="rptExp([[*{rptCode}]]);">导出测试</a>
            <a href="javascript:void(0);" th:onclick="rptSql([[*{rptCode}]]);">已执行SQL</a>
        </div>
        <div>
            <textarea th:type="text" name="rptExpr" id="rptExpr" th:text="*{rptExpr}"/>
        </div>
        <div>
            <laber>语言模式切换</laber>
            <select name="mode" id="mode" onchange="selectMode()">
                <option id="xml" value="xml">xml</option>
                <option id="sql" value="text/x-sql">sql</option>
            </select>
            <label>主题切换</label>
            <select name="theme" id="theme" onchange="selectTheme()">
                <option id="dracula" value="dracula">dracula</option>
                <option id="3024-day" value="3024-day">3024-day</option>
                <option id="3024-night" value="3024-night">3024-night</option>
                <option id="monokai" value="monokai">monokai</option>
            </select>
        </div>
    </div>
</form>
<div id="rptResult" class="consoleStyle"></div>
<div id="rptSql" class="consoleStyle"></div>
</body>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var rptListUrl = /*[[@{/rpt/600/list}]]*/ null;
    var rptExpUrl = /*[[@{/rpt/600/exp}]]*/ null;
    var rptSqlUrl = /*[[@{/rpt/600/rptSql/}]]*/ null;
    var themeInput = document.getElementById("theme");
    var modeInput = document.getElementById("mode");

    document.addEventListener('DOMContentLoaded',
        function(){
            var succ = document.getElementById("succ");
            var fail = document.getElementById("fail");
            var i = [[${rpt.state}]];
            if (i == 1) {
                succ.selected = true;
            } else {
                fail.selected = true;
            }
        },
        false);

    var rptList = function (rptCode) {
        xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function() {rptListCallback()};
        xmlHttp.open("GET", rptListUrl+"?rptCode="+rptCode+"&pageSize="+20+"&pageNo="+1, false);
        xmlHttp.send();
    }

    var rptListCallback = function() {
        if (xmlHttp.readyState==4) {
            if (xmlHttp.status == 200) {
                var res = xmlHttp.responseText;
                document.getElementById("rptResult").innerHTML=res;
            }
        }
    }

    var rptExp = function (rptCode) {
        window.location.href = rptExpUrl+"?rptCode="+rptCode;
    }

    var rptSql = function (rptCode) {
        xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function() {rptSqlCallback()};
        xmlHttp.open("GET", rptSqlUrl+rptCode, false);
        xmlHttp.send();
    }

    var rptSqlCallback = function() {
        if (xmlHttp.readyState==4) {
            if (xmlHttp.status == 200) {
                var res = xmlHttp.responseText;
                document.getElementById("rptSql").innerHTML=res;
            }
        }
    }

    var rptExpr = CodeMirror.fromTextArea(document.getElementById("rptExpr"), {
        mode: "xml",               //默认语言模式：xml代码高亮
        // mode: "text/x-sql",     //sql代码高亮
        indentWithTabs: true,
        smartIndent: true,
        lineNumbers: true,    //显示行号
        matchBrackets : true, //括号匹配
        autofocus: true,
        theme: "dracula",	//设置主题
        lineWrapping: true,	//代码折叠
        extraKeys: {        // 自动补全
            "Ctrl-Space": "autocomplete"
        },
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
    });
    rptExpr.setSize('auto','80em');   //设置编辑器高度

    function selectTheme() {
        var themeValue = themeInput.options[themeInput.selectedIndex].textContent;//获取下拉框的内容
        rptExpr.setOption("theme", themeValue);//把内容设置为主题色，
    }

    function selectMode() {
        var modeValue = modeInput.options[modeInput.selectedIndex].textContent;//获取下拉框的内容
        rptExpr.setOption("mode", modeValue);//把内容设置为主题色，
    }

    /*]]>*/
</script>
</html>
